<template>
  <el-form label-width="121">

    <el-form-item label="ID">
      <div class="detail">&nbsp;{{ customerDetail.id }}</div>
    </el-form-item>

    <el-form-item label="客户详情">
      <div class="detail">&nbsp;<router-link :to="'/dashboard/clue/' + customerDetail.clueId">查看客户详情</router-link>
      </div>
    </el-form-item>

    <el-form-item label="意向产品">
      <div class="detail">&nbsp;{{ customerDetail.intentionProductDO.name }}</div>
    </el-form-item>

    <el-form-item label="客户描述">
      <div class="detail">&nbsp;{{ customerDetail.description }}</div>
    </el-form-item>

    <el-form-item label="下次跟踪时间">
      <div class="detail">&nbsp;{{ customerDetail.nextContactTime }}</div>
    </el-form-item>

    <el-form-item label="创建时间">
      <div class="detail">&nbsp;{{ customerDetail.createTime }}</div>
    </el-form-item>

    <el-form-item label="创建人">
      <div class="detail">&nbsp;{{ customerDetail.createByDO === null ? '' : customerDetail.createByDO.name }}</div>
    </el-form-item>

    <el-form-item label="编辑时间">
      <div class="detail">&nbsp;{{ customerDetail.editTime }}</div>
    </el-form-item>

    <el-form-item label="编辑人">
      <div class="detail">&nbsp;{{ customerDetail.editByDO === null ? '' : customerDetail.editByDO.name }}</div>
    </el-form-item>

    <el-form-item label="跟踪记录" prop="noteContent">
      <el-input v-model="customerRemark.noteContent" style="padding-left: 0;" :rows="8" type="textarea"
        placeholder="请输入线索跟踪记录" />
    </el-form-item>

    <el-form-item label="跟踪方式" prop="noteWay">
      <el-select v-model="customerRemark.noteWay" placeholder="请选择跟踪方式" style="width: 100%;padding-left: 0;" clearable
        @click="loadDicValue('noteWay')">
        <el-option v-for="item in dicOptions" :key="item.id" :label="item.typeValue" :value="item.id" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="success" @click="customerRemarkSubmit(clueRemarkRuleFormRef)">提 交</el-button>
      <el-button type="primary" @click="createTran">创建交易</el-button>
      <el-button type="success" plain @click="goBack">返 回</el-button>
    </el-form-item>

    <el-form-item>
      <el-table :data="customerRemarkPageInfo.list" style="width: 100%" @selection-change="handSelection">
        <el-table-column type="index" label="序号" width="65" />
        <el-table-column property="noteContent" label="跟踪内容" />
        <el-table-column property="createTime" label="创建时间" />
        <el-table-column property="createByDO.name" label="创建人" />
        <el-table-column property="editTime" label="编辑时间" />
        <el-table-column property="editByDO.name" label="编辑人" />
        <el-table-column label="操作" width="110">
          <template #default="scope">
            <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="danger" :icon="Delete" circle @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next, jumper, total" :total="customerRemarkPageInfo.total"
        :page-size="customerRemarkPageInfo.pageSize" @change="toPage" />
    </el-form-item>

    <el-dialog v-model="tranDialogVisible" title="创建交易" width="45%" center>
      <el-form ref="createTranFormRef" :model="tran" :rules="tranRules" label-width="110px">
        <el-form-item label="交易金额" prop="money">
          <el-input v-model="tran.money" style="padding-left: 0;" />
        </el-form-item>
        <el-form-item label="预计成交时间" prop="expectedDate">
          <el-date-picker style="width: 100%;" v-model="tran.expectedDate" type="datetime" placeholder="请选择预计成交时间"
            value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="交易阶段" prop="stage">
          <el-select v-model="tran.stage" placeholder="请选择交易阶段" style="width: 100%;padding-left: 0;" clearable
            @click="loadDicValue('stage')">
            <el-option v-for="item in dicOptions" :key="item.id" :label="item.typeValue" :value="item.id"
              :disabled="item.order > 1" />
          </el-select>
        </el-form-item>
        <el-form-item label="交易描述" prop="description">
          <el-input v-model="tran.description" style="padding-left: 0;" :rows="8" type="textarea"
            placeholder="请输入交易描述" />
        </el-form-item>
        <el-form-item label="下次跟踪时间" prop="nextContactTime">
          <el-date-picker style="width: 100%;" v-model="tran.nextContactTime" type="datetime" placeholder="请选择下次跟踪时间"
            value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tranDialogVisible = false">关 闭</el-button>
          <el-button type="primary" @click="tranSubmit()">创 建</el-button>
        </div>
      </template>

    </el-dialog>
  </el-form>

</template>

<script setup>
import { inject, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { doGet, doPost } from "../http/httpRequest.js";
import { showMessage } from "../util/message.js";

let route = useRoute()
let customerRemark = ref({})
let customerRemarkPageInfo = ref({})
let customerDetail = ref({
  intentionProductDO: {},
  createByDO: {},
  editByDO: {}
})
let dicOptions = ref([{}])
let tranDialogVisible = ref(false)
let tran = ref({})
let flashPage = inject('flush')

onMounted(() => {
  loadCustomerDetail();
  loadCustomerRemarkList(1);
})

const loadCustomerDetail = () => {
  console.log(route.params) // 打印出路由参数
  let id = route.params.customerId;
  doGet('/api/customer/' + id, {}).then(resp => {
    if (resp) {
      if (resp.data.code === 200) {
        customerDetail.value = resp.data.info;
      } else {
        showMessage('数据加载失败', 'error');
      }
    }
  })
}

const loadCustomerRemarkList = (current) => {
  doGet('/api/customerRemark', {
    current: current,
    customerId: route.params.customerId
  }).then(resp => {
    if (resp) {
      if (resp.data.code === 200) {
        customerRemarkPageInfo.value = resp.data.info;
      } else {
        showMessage('数据加载失败', 'error');
      }
    }
  })
}

const toPage = (currentPage, pageSize) => {
  loadCustomerRemarkList(currentPage);
}

const loadDicValue = (type) => {
  console.log(type)
  doGet('/api/dic/' + type, {}).then(resp => {
    if (resp) {
      if (resp.data.code === 200) {
        dicOptions.value = resp.data.info;
      } else {
        showMessage('数据加载失败', 'error');
      }
    }
  })
}

const createTran = () => {
  tranDialogVisible.value = true;
}

const tranSubmit = () => {
  doPost('/api/tran', {
    customerId: route.params.customerId,
    money: tran.value.money,
    expectedDate: tran.value.expectedDate,
    stage: tran.value.stage,
    description: tran.value.description,
    nextContactTime: tran.value.nextContactTime,
  }).then(resp => {
    if (resp) {
      if (resp.data.code === 200) {
        showMessage('交易创建成功', 'success');
        tranDialogVisible.value = false;
        flashPage();
      }else{
        showMessage('交易创建失败','error');
      }
    }
  })
}


</script>
<style scoped></style>